<template>
  <div class="drag head">设置</div>
  <div class="main">
    <div class="left">
      <div
        :class="['个人信息' === currentSelection ? 'active' : '']"
        @click="currentSelection = '个人信息'"
      >
        个人信息
      </div>
      <br />
      <div
        :class="['文件管理' === currentSelection ? 'active' : '']"
        @click="currentSelection = '文件管理'"
      >
        文件管理
      </div>
    </div>
    <div class="center"></div>
    <div class="right">
      <div v-if="'个人信息' === currentSelection">
        <el-form>
          <el-form-item>
            <div class="text-center">
              <UserAvatar></UserAvatar>
            </div>
          </el-form-item>
          <el-form-item>
            甜蜜账号：<span v-if="!isUpdateUserSweetCircleId"
              >{{ userSweetCircleId }} &nbsp;&nbsp;</span
            >
            <el-input
              v-if="isUpdateUserSweetCircleId"
              v-model="userSweetCircleId"
              placeholder="请填写备注信息"
              @click.stop
            >
              <template #suffix>
                <el-button key="primary" type="text" @click.stop="updateUserSweetCircleId"
                  >保存</el-button
                >
                <el-button key="primary" type="text" @click.stop="CustomizationClick(0)"
                  >取消
                </el-button>
              </template>
            </el-input>
            <span
              v-if="!isUpdateUserSweetCircleId"
              class="iconfont icon-bianji"
              @click.stop="isUpdateUserSweetCircleId = true"
            ></span>
          </el-form-item>
          <el-form-item>
            昵称：
            <el-input v-model="formData.nickName" clearable placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="朋友权限" prop="joinType">
            <el-switch v-model="formData.joinType" :active-value="1" :inactive-value="0" />&nbsp;
            <div class="info">加我为好友时需要验证</div>
          </el-form-item>
          <el-form-item>
            地区：
            <el-cascader v-model="formData.areaName" :options="AreaData" @change="change" />
          </el-form-item>
          <el-form-item label="个性签名" prop="personalSignature">
            <el-input
              v-model.trim="formData.personalSignature"
              :show-word-limit="true"
              clearable
              maxlength="35"
              placeholder="请输入个性签名"
              resize="none"
              rows="3"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="submit">
          <el-button type="primary" @click="savaInfo">修改信息</el-button>
        </div>
      </div>
      <div v-if="currentSelection === '文件管理'">文件管理</div>
    </div>
  </div>

  <WindowOperation :close-type="0" :show-max="false" :show-set-top="false"></WindowOperation>
</template>
<script setup>
import WindowOperation from '#/components/WindowOperation.vue'
import UserAvatar from './profile/UserAvatar.vue'
import { useUserInfoStore } from '#/stores/UserInfoStore'
import { onMounted, ref } from 'vue'
import Tool from '#/utils/Tool'
import AreaData from '#/utils/AreaData'
import Api from '#/utils/Api'
import { ElMessage } from 'element-plus'

const userInfoStore = useUserInfoStore()
//当前选择
const currentSelection = ref('个人信息')
const userSweetCircleId = ref('')
const userSweetCircleIdB = ref('')
const avatar = ref('')
const userInfo = userInfoStore.getUserInfo()
const formData = ref({
  userId: '',
  nickName: '',
  sex: '',
  joinType: '',
  areaName: [],
  personalSignature: ''
})
const isUpdateUserSweetCircleId = ref(false) // 用户甜蜜站好是否更新  用于切换 编辑状态

// 更新用户甜蜜账号
const updateUserSweetCircleId = async () => {
  isUpdateUserSweetCircleId.value = false
  const res = await Api.updateUserSweetCircleId({
    userId: userInfo.userId,
    userSweetCircleId: userSweetCircleId.value
  })
  if (res.code === 200) {
    ElMessage.success(res.msg)
    userInfo.userSweetCircleId = userSweetCircleId.value
    userInfoStore.setUserInfo(userInfo)
    window.ipcRenderer.send('updateUserInfoA', {
      type: 'userSweetCircleId',
      data: userSweetCircleId.value
    })
  }
}

const savaInfo = async () => {
  if (formData.value.nickName.length > 15) {
    ElMessage.error('昵称不能超过15个字符')
    return
  }
  // console.log(Object.prototype.toString.call("[1,1,2]"));
  // 将数组中的所有元素 使用空格拼接返回字符串
  if (Array.isArray(formData.value.areaName)) {
    if (formData.value.areaName.length === 2) {
      formData.value.areaName = formData.value.areaName[0] + ' ' + formData.value.areaName[1]
    } else {
      formData.value.areaName = formData.value.areaName[0]
    }
  }
  const res = await Api.updateUserInfo(formData.value)
  if (res.code === 200) {
    ElMessage.success(res.msg)
    userInfoStore.setUserInfo(res.data)
    formData.value.areaName = formData.value.areaName.split(' ')
    window.ipcRenderer.send('updateUserInfoA', { type: 'userInfo', data: res.data })
  } else {
    ElMessage.error(res.msg)
  }
}

const change = () => {
  // console.log(value)
}

const CustomizationClick = (index) => {
  switch (index) {
    case 0:
      isUpdateUserSweetCircleId.value = false
      userSweetCircleId.value = userSweetCircleIdB.value
      break
  }
}

onMounted(() => {
  formData.value.avatar = userInfo.avatar
  formData.value.userId = userInfo.userId
  formData.value.nickName = userInfo.nickName
  formData.value.sex = userInfo.sex
  formData.value.joinType = userInfo.joinType
  formData.value.areaName = userInfo.areaName.split(' ')
  formData.value.personalSignature = userInfo.personalSignature
  avatar.value = Tool.getAvatar(formData.value.userId, formData.value.avatar, 500)
  userSweetCircleId.value = userInfo.userSweetCircleId
  userSweetCircleIdB.value = userInfo.userSweetCircleId
})
</script>
<style lang="scss" scoped>
.head {
  height: 25px;
  color: #8c8c8c;
  font-size: 15px;
  padding: 5px 0 0 15px;
  background: #f3f3f4;
}

.main {
  display: flex;
  flex-direction: row;
  padding-top: 15px;
  padding-left: 15px;
  background: #f3f3f4;

  .left {
    width: 90px;
    height: calc(100vh - 40px);
    padding: 0 0 5px 10px;
    user-select: none;
    cursor: pointer;
  }

  .center {
    width: 1px;
    height: calc(100vh - 40px);
    background: #cbcbcb;
  }

  .right {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-form {
      width: 300px;
    }

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 200px;
      }

      :deep(.el-input__wrapper) {
        background: #f1f1f3;
        box-shadow: none;
      }
    }
  }
}

.active {
  color: #07c160;
}

.submit {
  display: flex;
  margin-top: 10px;
  justify-content: center;
}

.text-center {
  text-align: center;
}
</style>
